<template>
  <div class="map-card">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane v-for="item in tabList" :key="item.prop" :tab="item.name" />
    </a-tabs>
    <div class="map-content" v-if="alarmInfo.eventId">
      <MapCard :alarmInfo="alarmInfo" v-if="activeKey === 'mubiao'" />
      <SpeedChart v-else-if="activeKey === 'sudu'" :alarmInfo="alarmInfo" />
      <RadarCard v-else-if="activeKey === 'radar'" :alarmInfo="alarmInfo" />
      <AISCard v-else-if="activeKey === 'ais'" :alarmInfo="alarmInfo" />
      <EventResult v-else-if="activeKey === 'result'" :alarmInfo="alarmInfo" />
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import MapCard from './map/index.vue';
  import RadarCard from './radar/index.vue';
  import AISCard from './ais/index.vue';
  import SpeedChart from './speed/index.vue';
  import EventResult from './result/index.vue';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });

  const tabList = [
    {
      name: '目标呈现',
      prop: 'mubiao',
    },
    {
      name: '雷达点迹数据',
      prop: 'radar',
    },
    {
      name: 'AIS点迹数据',
      prop: 'ais',
    },
    {
      name: 'AI结果',
      prop: 'result',
    },
    // {
    //   name: 'AI识别记录',
    //   prop: 'AIshibie',
    // },
    // {
    //   name: '速度统计',
    //   prop: 'sudu',
    // },
  ];
  const activeKey = ref(null);

  function close() {
    activeKey.value = null;
  }

  function open() {
    activeKey.value = tabList[0].prop;
  }

  defineExpose({ close, open });
</script>

<style lang="less" scoped>
  .map-card {
    height: 100%;
    padding-right: 5px;
    :deep .ant-tabs-nav {
      margin-bottom: 0;
      .ant-tabs-tab-btn {
        color: #ddd;
      }
      .ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #fff;
        }
      }
      .ant-tabs-ink-bar {
        background-color: #fff;
      }
    }
    .map-content {
      width: 100%;
      height: calc(100% - 46px);
    }
  }
</style>
